<script setup>
// 商品列表页，展示所有商品
import { ref } from 'vue'
import { useCartStore } from '../stores/cart'

const cartStore = useCartStore() // 获取购物车状态

// 模拟商品数据（实际开发中应从后端接口获取）
const products = ref([
  { id: 1, name: '商品A', price: 99, image: 'https://via.placeholder.com/120', description: '这是商品A的描述' },
  { id: 2, name: '商品B', price: 199, image: 'https://via.placeholder.com/120', description: '这是商品B的描述' }
])

// 加入购物车方法
function addToCart(item) {
  cartStore.addToCart(item)
  alert('已加入购物车！')
}
</script>

<template>
  <div class="home">
    <h2>商品列表</h2>
    <div class="product-list">
      <!-- 遍历商品数组，展示每个商品 -->
      <div class="product-item" v-for="item in products" :key="item.id">
        <img :src="item.image" alt="商品图片" style="width:120px;" />
        <h3>{{ item.name }}</h3>
        <p>价格：￥{{ item.price }}</p>
        <router-link :to="`/product/${item.id}`">查看详情</router-link>
        <button @click="addToCart(item)">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home {
  padding: 20px;
}
.product-list {
  display: flex;
  gap: 20px;
}
.product-item {
  border: 1px solid #eee;
  padding: 10px;
  width: 180px;
  text-align: center;
}
</style>
